<template>
    <el-container>
        <el-header :height="'auto'" class="mb20">
            <breadcrumb :title="'数据源管理'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="dataName" placeholder="请输入数据源名称" class="input mr10"
                                      size="small"></el-input>
                            <el-select v-model="dataType" placeholder="请输入数据源类型" class="mr10" size="small">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!--                            <el-date-picker v-model="searchTime" size="small" class="short mr10"-->
                            <!--                                            type="daterange"-->
                            <!--                                            range-separator="~"-->
                            <!--                                            start-placeholder="开始日期"-->
                            <!--                                            end-placeholder="结束日期">-->
                            <!--                            </el-date-picker>-->
                            <el-button class="primary" size="small" @click="getList">查询</el-button>
                        </div>
                        <div class="text-right">
                            <el-button type="primary" class="primary" size="small" @click="add">新增</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" :height="'100%'"
                                   ref="table">
                        <template slot="operation" slot-scope="scope">
                            <el-link type="primary" :underline="false"
                                     class="mr10" @click="query(scope.row)">查看
                            </el-link>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" v-if="page" class="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <transition name="slide">
                <router-view @upload="getList"></router-view>
            </transition>
        </el-main>
    </el-container>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {
        data() {
            return {
                dataName: '',
                dataType: '',
                options: [
                    {
                        value: '',
                        label: '数据源类型'
                    },
                    {
                        value: 'MYSQL',
                        label: 'MYSQL'
                    },
                    {
                        value: 'ORACLE',
                        label: 'ORACLE'
                    }
                ],
                // searchTime: '',
                tableData: [],
                header: [
                    {
                        prop: 'dbDesc',
                        label: '数据源名称',
                        minWidth: 130,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'dbType',
                        label: '类型',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'dbIp',
                        label: 'IP地址',
                        minWidth: 120,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'dbPort',
                        label: '端口',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'dbName',
                        label: '数据库名',
                        minWidth: 150,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'dbUser',
                        label: '连接用户名',
                        minWidth: 100,
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: 100,
                        fixed: 'right'
                    }
                ],
                slotColumns: ['operation'],
                page: null,
                loading: false,
                index: 1
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            add() {
                this.$router.push({
                    path: this.$route.path + '/add'
                })
            },
            query(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        id: row.dbId
                    }
                })
            },
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/rdDbDict/databaseList', {
                    dbDesc: this.dataName,
                    dbType: this.dataType,
                    size: 15,
                    current: this.index || 1
                }).then(result => {
                    if (result.success) {
                        this.loading = false
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            }

        },
        components: {
            breadcrumb,
            tableExample,
            page
        }
    }
</script>

<style scoped lang="less">

</style>
